html,
body,
header,
.view
  height 100%
  overflow-wrap break-word

body
  background-color $body-bg-color
  color $text-color

  a
    color $link-color

    &:hover
      color $link-hover-color

.hover-with-bg
  display inline-block
  padding: .45rem

  &:hover
    background-color $link-hover-bg!important

#board
  position relative
  margin-top -3rem
  background-color $board-bg-color
  border-radius 0.5rem
  z-index 3

@media (max-width: 768px)
  header
    .h2
      font-size 1.5rem

  .nopadding-md
    padding-left 0 !important
    padding-right 0 !important

.row
  padding-top 0.5rem
  padding-bottom 0.5rem

#local-search-result
  .search-list-title
    border-left 3px solid #0d47a1

  .search-list-content
    padding 0 1.25rem

// Rewrite github-markdown.css

.markdown-body hr
  height .2em
  margin 2rem 0

// Rewrite mdb.css

.list-group-item
  border 0

.page-link
  font-size 1.1rem

// Navbar

.navbar
  background-color transparent
  font-size 0.875rem
  color $navbar-text-color

  a
    color $navbar-text-color

    &:hover
      background-color rgba(0, 0, 0, 0.1)

.navbar-custom
  color $navbar-text-color

  a
    color $navbar-text-color

.top-nav-collapse
  background-color $navbar-bg-color

.navbar-col-show
  background-color $navbar-bg-color

@media (max-width: 768px)
  .navbar
    font-size 1rem
    line-height 2.5rem

.scroll-down-bar
  position absolute
  width 100%
  font-size 2rem
  height 8rem
  text-align center
  cursor pointer
  bottom 0

.scroll-down-arrow
  position absolute
  padding-top 2rem
  color #ff
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation scroll-down 1.5s infinite
  animation scroll-down 1.5s infinite

#scroll-top-button
  position fixed
  background #fff
  border-radius 4px
  width 40px
  height 40px
  bottom -60px
  -webkit-transition bottom .3s ease
  -moz-transform bottom .3s ease
  -ms-transform bottom .3s ease
  -o-transform bottom .3s ease
  transition bottom .3s ease
  outline none
  display flex
  display -webkit-flex
  align-items center

#scroll-top-button i
  -webkit-transform translateZ(0)
  -moz-transform translateZ(0)
  -ms-transform translateZ(0)
  -o-transform translateZ(0)
  transform translateZ(0)

#scroll-top-button:hover i, #scroll-top-button:active i
  -webkit-animation-name scroll-top
  animation-name scroll-top
  -webkit-animation-duration 1s
  animation-duration 1s
  -webkit-animation-delay .1s
  animation-delay .1s
  -webkit-animation-timing-function ease-in-out
  animation-timing-function ease-in-out
  -webkit-animation-iteration-count infinite
  animation-iteration-count infinite
  -webkit-animation-fill-mode forwards
  animation-fill-mode forwards
  -webkit-animation-direction alternate
  animation-direction alternate

.scroll-top-arrow
  margin auto
  font-size 24px
  color #8590AB

.animated-icon
  width 30px
  height 20px
  position relative
  margin 0
  -webkit-transform rotate(0deg)
  -moz-transform rotate(0deg)
  -o-transform rotate(0deg)
  transform rotate(0deg)
  -webkit-transition .5s ease-in-out
  -moz-transition .5s ease-in-out
  -o-transition .5s ease-in-out
  transition .5s ease-in-out
  cursor pointer

  span
    display block
    position absolute
    height 3px
    width 100%
    border-radius 9px
    opacity 1
    left 0
    -webkit-transform rotate(0deg)
    -moz-transform rotate(0deg)
    -o-transform rotate(0deg)
    transform rotate(0deg)
    -webkit-transition .25s ease-in-out
    -moz-transition .25s ease-in-out
    -o-transition .25s ease-in-out
    transition .25s ease-in-out
    background #ffffff

    &:nth-child(1)
      top 0

    &:nth-child(2)
      top 10px

    &:nth-child(3)
      top 20px

  &.open
    span
      &:nth-child(1)
        top 11px
        -webkit-transform rotate(135deg)
        -moz-transform rotate(135deg)
        -o-transform rotate(135deg)
        transform rotate(135deg)

      &:nth-child(2)
        opacity 0
        left -60px

      &:nth-child(3)
        top 11px
        -webkit-transform rotate(-135deg)
        -moz-transform rotate(-135deg)
        -o-transform rotate(-135deg)
        transform rotate(-135deg)


@keyframes scroll-down
  0%
    opacity 0.8
    top 0
  50%
    opacity 0.4
    top -1em
  100%
    opacity 0.8
    top 0

@keyframes scroll-top
  0%
    -webkit-transform translateY(0)
    transform translateY(0)
  50%
    -webkit-transform translateY(-0.35rem)
    transform translateY(-0.35rem)
  100%
    -webkit-transform translateY(0)
    transform translateY(0)

.m-depth
  box-shadow: 0px 0px 17px rgba(57,77,97,.1)!important